<template>
  <div class="cal-wrapper">
    <div class="cal-header">
      <div class="l" @click="preMonth">
        <div :class="arrowBoth?'arrow-left icon':''">&nbsp;</div>
      </div>
      <div class="title">
        <span v-if="!arrowBoth" @click="preMonth" class="arrow-left icon">&nbsp;</span>
        {{curYearMonth}}
        <span
          v-if="!arrowBoth"
          @click="nextMonth"
          class="arrow-right icon"
        >&nbsp;</span>
      </div>
      <div class="r" @click="nextMonth">
        <div :class="arrowBoth?'arrow-right icon':''">&nbsp;</div>
      </div>
    </div>
    <div class="cal-body">
      <div class="weeks">
        <span
          v-for="(dayName, dayIndex) in i18n[calendar.options.locale].dayNames"
          class="item"
          :key="dayIndex"
        >{{i18n[calendar.options.locale].dayNames[(dayIndex + calendar.options.weekStartOn) % 7]}}</span>
      </div>
      <div class="dates">
        <div
          class="row"
          v-for="(item,row) in Math.ceil(dayList.length / 7)"
          :key="row"
          v-show="!isArrowUp || (isArrowUp && row==curDayRow)"
        >
          <div v-for="(date, index) in dayList.slice(row*7,row*7+7)" @click="itemClick(date)" class="item" :key="index">
            <div>
              <p
                class="date-num"
                :style="{color: getRoomStatus(date.date) ? '' : '#909399',fontWeight:today == date.date?'bold':''}"
              >{{date.status ? date.date.split('/')[2] : '&nbsp;'}}</p>
              <!---
              <span
                class="is-event"
                :style="{backgroundColor: date.date == selectedDay && date.status ? customColor : 'inherit'}"
              ></span>--->
              <div v-if="date.status">
                <el-tag
                  v-if="getRoomStatus(date.date)" size="mini" :type="getRoomStatus(date.date).type"
                  class="room-prompt">{{ getRoomStatus(date.date).label }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cal-footer" v-show="showCollapse">
      <div class="container">
        <div class="arrow" :class="!isArrowUp?'up':'down'" @click="arrowHandler">
          <span class="icon"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import i18n from '../i18n.js'
import { dateTimeFormatter, isEqualDateStr } from '../tools.js'

// const inBrowser = typeof window !== 'undefined'
export default {
  name: 'CalPanel',
  props: {
    events: {
      type: Array,
      required: true
    },
    calendar: {
      type: Object,
      required: true
    },
    selectedDay: {
      type: String,
      required: false
    },
    arrowBoth: {
      type: Boolean,
      default: false
    },
    showCollapse: {
      type: Boolean,
      default: true
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      i18n,
      isArrowUp: false,
      curDayRow: -1,
      value: 1
    }
  },
  computed: {
    getRoomStatus (curDate) {
      return curDate => {
        const match = this.list.find(item => item.date === this.$dayjs(curDate).format('YYYY-MM-DD 00:00:00'))
        if (!match) {
         return null // 空表示禁用状态
        } else {
          return {
            label: match.forbidden === 0 ? '有房' : '无房',
            type: match.forbidden === 0 ? 'success' : 'warning'
          }
        }
      }
    },
    dayList () {
      let firstDay = new Date(
        this.calendar.params.curYear,
        this.calendar.params.curMonth,
        1
      )
      let dayOfWeek = firstDay.getDay()
      // 根据当前日期计算偏移量 // Calculate the offset based on the current date
      if (this.calendar.options.weekStartOn > dayOfWeek) {
        dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn + 7
      } else if (this.calendar.options.weekStartOn < dayOfWeek) {
        dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn
      }

      let startDate = new Date(firstDay)
      startDate.setDate(firstDay.getDate() - dayOfWeek)

      let item
      let status
      let tempArr = []
      let tempItem
      // let nullStartIndex = -1
      // let nullEndIndex = -1
      for (let i = 0; i < 42; i++) {
        item = new Date(startDate)
        item.setDate(startDate.getDate() + i)

        if (this.calendar.params.curMonth === item.getMonth()) {
          status = 1
        } else {
          status = 0
        }

        tempItem = {
          date: `${item.getFullYear()}/${item.getMonth() +
            1}/${item.getDate()}`,
          status: status,
          customClass: []
        }
        if (this.curDayRow === -1 && tempItem.date === this.today) {
          // this.curDayRow = tempItem.date === this.today ? Math.floor(i / 6) : -1
        }
        this.events.forEach(event => {
          if (isEqualDateStr(event.date, tempItem.date)) {
            tempItem.title = event.title
            tempItem.desc = event.desc || ''
            if (event.customClass) tempItem.customClass.push(event.customClass)
          }
        })
        tempArr.push(tempItem)
      }
      // 删除非当月空白行&解决选中后，回到上月默认选中空白项
      let allNull = true
      for (let i = 36; i < tempArr.length; i++) {
        if (tempArr[i].status) {
          allNull = false
        }
      }
      if (allNull) {
        return tempArr.splice(0, 35)
      }
      return tempArr
    },
    today () {
      let dateObj = new Date()
      return `${dateObj.getFullYear()}/${dateObj.getMonth() +
        1}/${dateObj.getDate()}`
    },
    curYearMonth () {
      let tempDate = Date.parse(
        new Date(
          `${this.calendar.params.curYear}/${this.calendar.params.curMonth +
            1}/01`
        )
      )
      return dateTimeFormatter(
        tempDate,
        this.i18n[this.calendar.options.locale].format
      )
    },
    customColor () {
      return this.calendar.options.color
    }
  },
  methods: {
    // 单条目被点击
    itemClick(curDate) {
      this.$emit('itemClick', curDate)
    },
    nextMonth () {
      this.$EventCalendar.nextMonth()
      this.$emit('month-changed', this.curYearMonth)
    },
    preMonth () {
      this.$EventCalendar.preMonth()
      this.$emit('month-changed', this.curYearMonth)
    },
    handleChangeCurday (date) {
      this.$emit('cur-day-changed', date.date)
    },
    arrowHandler () {
      this.isArrowUp = !this.isArrowUp
      this.$emit('arrow-handler', this.isArrowUp ? 'up' : 'down')
    }
  }
}
</script>

<style scoped>
  .item {
    height: 60px;
  }
  .item:hover {
    cursor: pointer !important;
  }
  .room-prompt {
    font-size: 2px;
  }
  .date-num {
    height: 35px;
  }
  .is-event {
    margin-top: -25px !important;
  }
</style>
